<template>
  <view class="cloudInventory">
    <view class="inventoryInfo" style="display: flex; flex-direction: column">
      <view class="box">
        <view class="box_left">
          <view class="box_left_title">总云仓库存</view>
          <view class="Num">{{ conuntInventory }}</view>
        </view>
        <view class="box_right">
          <view class="button" @click="toCloudDetail()">库存明细</view>
        </view>
      </view>
    </view>
    <view class="btn-bottom">
      <view v-for="(item, index) in ['我的库存', '下级库存']">
        <view @click="btnCl(index)" :class="[btnIndex == index ? 'clazz' : '']">
          {{ item }}
          <view v-if="btnIndex == index" class="xian"> </view>
        </view>
      </view>
    </view>
    <scroll-view
      v-if="btnIndex == 0 && cloudList.length > 0"
      scroll-y
      :style="{ height: mainHeight }"
      class="scrollView"
    >
      <view class="recommend">
        <view
          v-for="(item, index) in cloudList"
          :key="index"
          class="recommendi"
        >
          <view class="number">
            <view
              class="checkbox"
              v-if="item.goodInventory > 0"
              @click="handleTriggerSelect(item, index)"
              :class="item.selectKey ? 'selected' : ''"
            >
              <uni-icons
                class="selected-icon"
                v-if="item.selectKey"
                type="checkbox-filled"
                color="#ff4254"
                size="24"
              ></uni-icons>
              <uni-icons
                type="circle"
                color="#aaaaaa"
                size="24"
                v-else
              ></uni-icons>
            </view>
            商品编号: {{ item.goodId }}
          </view>
          <!-- <view class="quota">
            <view class="quotai">本月限购: {{ 0 }}</view>
            <view class="quotai">剩余数量: {{ 0 }}</view>
            <view class="quotai">预售数量: {{ 0 }}</view>
          </view> -->
          <view class="item">
            <image :src="baseImgUrl + item.goodImg"></image>
            <view class="itemInfo">
              <view>{{ item.goodName }}</view>
              <view>云库存:{{ item.goodInventory }}</view>
            </view>
          </view>
          <view class="price">
            <view class="pricei">
              <view class="pricei_Num+">{{ item.profit }}</view>
              <view class="pricei_text">我的利润</view>
            </view>
            <view class="pricei">
              <view class="pricei_Num+">{{ item.stockPrice }}</view>
              <view class="pricei_text">进货价</view>
            </view>
            <view class="pricei">
              <view class="pricei_Num+">{{ item.retailPrice }}</view>
              <view class="pricei_text">建议零售价</view>
            </view>
          </view>
          <view class="button">
            <view
              :class="item.id ? 'buttoni' : 'button-empty'"
              @click="toCloudDetail(item.id)"
              >库存明细
            </view>
            <view
              class="buttoni"
              @click="
                pageTo(
                  `/subPages/mine/cloudInventory/replenish?id=${item.goodId}`
                )
              "
              >补货</view
            >
            <view
              class="buttoni"
              @click="
                pageTo(
                  `/subPages/mine/cloudInventory/distribution?id=${item.id}`
                )
              "
              >云仓配货</view
            >
            <!-- @click="pageTo('/subPages/mine/cloudInventory/distribution')" -->
            <!-- <view class="buttoni" @click="pageTo('/subPages/mine/cloudInventory/outLine')">提货到线下</view> -->
          </view>
        </view>
      </view>
    </scroll-view>

    <scroll-view
      v-if="btnIndex == 1 && subordinateList.length > 0"
      scroll-y
      :style="{ height: mainHeight }"
      class="scrollView"
    >
      <view class="recommend-btn">
        <!-- 用户卡片1 -->
        <view
          class="user-card"
          v-for="(item, index) in subordinateList"
          @click="btnUrl(item.userId, item.stockCount)"
        >
          <view>
            <image class="avatar" :src="item.avatar" mode=""></image>
          </view>
          <view class="user-info">
            <view class="user-name"
              >{{ item.nickName }}
              <span
                style="
                  margin-left: 20rpx;
                  font-size: 27rpx;
                  font-weight: normal;
                "
                >库存数:{{ item.stockCount }}</span
              >
            </view>
            <view class="user-tags">
              <span class="vip-tag" v-if="item.vipMemberName">{{
                item.vipMemberName
              }}</span>
              <span class="creator-tag" v-if="item.memberName">{{
                item.memberName
              }}</span>
            </view>
            <view class="user-id">ID: {{ item.userId }}</view>
          </view>
          <!-- 					<view class="inventory-link">
						查看库存情况 >
					</view> -->
        </view>
      </view>
    </scroll-view>

    <Empty v-else />
    <view class="cart-footer">
      <view class="cart-button">
        <view class="price-content">
          <view class="unit"
            >共计 <text style="font-size: 28rpx">{{ amount }}</text> 件</view
          >
        </view>
        <view class="cart-submit" @click="handleSubmit">提货到线下</view>
      </view>
    </view>
  </view>
</template>

<script>
import mineApi from "@/api/mine";
import { baseImgUrl } from "@/config";

export default {
  data() {
    return {
      btnIndex: 0,
      baseImgUrl,
      mainHeight: "",
      conuntInventory: 0, // 总云仓库存
      cloudList: [],
      selectCartList: [],
      amount: 0,
      subordinateList: [],
    };
  },
  watch: {
    selectCartList: {
      handler() {
        this.calculatePrice();
      },
      deep: true,
    },
  },
  onShow() {
    this.getCloudList();
    this.getlistAgencyInventoryByUserId();
  },
  onLoad() {
    this.mainHeight =
      this.$store.getters.heightData.noTabMainHeight - 160 - 60 + "px";
  },
  methods: {
    getlistAgencyInventoryByUserId() {
      mineApi.listAgencyInventoryByUserId().then((res) => {
        this.subordinateList = res.rows;
      });
    },
    btnUrl(id, stockCount) {
      uni.navigateTo({
        url: `/subPages/mine/cloudInventory/cloudInventorySubpage?userId=${id}&stockCount=${stockCount}`,
      });
    },
    btnCl(row) {
      this.btnIndex = row;
    },
    getCloudList() {
      mineApi.getCloudList().then((res) => {
        if (res.code == 200) {
          this.cloudList = res.data.bdmCloudInventoryList.map((item) => {
            return {
              ...item,
              selectKey: false,
            };
          });
          this.conuntInventory = res.data.conuntInventory;
        }
      });
    },
    toCloudDetail(id) {
      if (id) {
        uni.navigateTo({
          url: `/subPages/mine/cloudInventory/inventoryInfo?id=${id}`,
        });
      } else {
        uni.navigateTo({
          url: `/subPages/mine/cloudInventory/inventoryInfo`,
        });
        return;
        uni.showToast({
          title: "当前商品暂无库存明细",
          icon: "none",
        });
      }
    },
    pageTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    handleTriggerSelect(item, index) {
      this.$set(this.cloudList, index, {
        ...this.cloudList[index],
        selectKey: !this.cloudList[index].selectKey,
      });
      this.selectCartList = this.cloudList.filter((el) => el.selectKey);
    },
    calculatePrice() {
      this.amount = this.selectCartList.length;
    },
    handleSubmit() {
      if (this.amount <= 0) {
        uni.showToast({
          title: "请选择商品",
          icon: "none",
        });
        return;
      }
      this.selectCartList.map((el) => (el.count = 1));
      const params = encodeURIComponent(JSON.stringify(this.selectCartList));
      uni.navigateTo({
        url: "/subPages/mine/cloudInventory/outLine?params=" + params,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.recommend-btn {
  display: flex;
  flex-direction: column;
  gap: 20px;

  .user-card {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.3s ease;

    position: relative;

    .inventory-link {
      right: 20rpx;
      top: 30rpx;
      position: absolute;
      color: #1890ff;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
      display: flex;
      white-space: nowrap;
    }

    .inventory-link i {
      margin-left: 4px;
      font-size: 12px;
      transition: transform 0.2s ease;
    }

    .inventory-link:hover {
      color: #40a9ff;
    }

    .inventory-link:hover i {
      transform: translateX(2px);
    }
  }

  .user-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    flex-shrink: 0;
  }

  .user-info {
    flex-grow: 1;
  }

  .user-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
  }

  .user-tags {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
  }

  .vip-tag {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #745a00;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
  }

  .creator-tag {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
  }

  .user-id {
    font-size: 14px;
    color: #888;
  }
}

.btn-bottom {
  margin: 30rpx;
  padding: 0 40rpx;
  font-weight: bold;
  display: flex;
  width: 100%;
  gap: 30rpx;

  .xian {
    width: 70rpx;
    height: 10rpx;
    background-color: red;
    border-radius: 20rpx;
    margin-top: 10rpx;
  }

  .clazz {
    color: red;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.cloudInventory {
  width: 100%;
  height: 100%;

  .inventoryInfo {
    background-color: #fff;
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px -5px 5px 8px #64646466;
    margin-bottom: 8px;

    .box {
      width: 93%;
      height: 135px;
      background: url("https://lm.bwmonlinestore.com/prod-api/profile/upload/2025/01/07/inventorybg_20250107190506A001.png")
        no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      padding: 15px 20px;

      .box_left {
        width: 60%;
        height: 100%;

        .box_left_title {
          width: 100%;
          height: 40%;
          color: #faf7f7b3;
          display: flex;
          align-items: center;
          font-size: 15px;
        }

        .Num {
          color: #fff;
          font-size: 27px;
          display: flex;
          align-items: center;
          width: 100%;
          height: 50%;
          margin-left: 8px;
        }
      }

      .box_right {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f75a7e;
        width: 45%;
        height: 92%;

        .button {
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #fff;
          width: 85px;
          height: 40px;
          border-radius: 25px;
          font-weight: 600;
        }
      }
    }
  }

  .scrollView {
    width: 100%;
    padding: 0 30rpx 90rpx;
    overflow-y: scroll;

    .recommend {
      width: 100%;
      height: 100%;

      .recommendi {
        width: 100%;
        margin: 20rpx 0;
        padding: 15px;
        background-color: #fff;
        border-radius: 8px;
        box-sizing: border-box;

        .number {
          display: flex;
          align-items: center;

          .checkbox {
            display: flex;
            justify-items: center;
            align-items: center;
            width: 22px;
            height: 22px;
            // border: 2rpx solid rgba(0, 0, 0, 0.6);
            // border-radius: 50%;
            margin: 0 24rpx 0 8rpx;

            &.selected {
              // padding: 2rpx;
              border: none;
              // background: linear-gradient(to right, #FEEF3C, #F3CD34);

              .selected-icon {
                margin: 2rpx;
                color: #fff !important;
              }
            }
          }
        }

        .quota {
          display: flex;
          color: #ff4254;
          height: 35px;
          align-items: center;
          width: 100%;

          .quotai {
            padding-left: 5rpx;
          }
        }

        .item {
          width: 100%;
          height: 80px;
          display: flex;
          align-items: center;

          image {
            width: 65px;
            height: 65px;
          }

          .itemInfo {
            color: #000;
            font-weight: 500;
            display: flex;
            flex-direction: column;
            height: 65px;
            justify-content: space-between;
            margin-left: 10px;
            font-size: 17px;
          }
        }

        .price {
          display: flex;
          width: 100%;
          height: 90px;
          margin-top: 8px;
          background-color: #f8f8f8;
          border-radius: 8px;
          justify-content: space-around;
          align-items: center;

          .pricei {
            text-align: center;

            .pricei_Num {
              color: #000;
              font-weight: 600;
              font-size: 18px;
            }

            .pricei_text {
              color: #c6c4c4;
              font-size: 26rpx;
              padding-top: 5rpx;
            }
          }
        }

        .button {
          display: flex;
          width: 100%;
          justify-content: space-between;

          .buttoni {
            border: 1px solid #ff4254;
            border-radius: 5px;
            padding: 5px 8px;
            margin-top: 15px;
            color: #ff4254;
          }

          .button-empty {
            border: 1px solid #c6c4c4;
            border-radius: 5px;
            padding: 5px 8px;
            margin-top: 15px;
            color: #c6c4c4;
          }
        }
      }
    }
  }

  .cart-footer {
    position: fixed;
    bottom: 0;
    background: #fff;
    width: 100%;
    padding: 24rpx;
    box-sizing: border-box;
    left: 0;
    display: flex;
    justify-content: space-between;
    border-top: 1rpx solid #dddddd;

    .cart-button {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .price-content {
        display: flex;
        align-items: flex-end;
        color: #000;
      }

      .cart-submit {
        margin-left: 24rpx;
        background: #000;
        border-radius: 60rpx;
        height: 90rpx;
        width: 330rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
      }
    }
  }
}
</style>
